<!DOCTYPE html>
//- pug index.pug -w
- const blocks = ["air", "stone", "grass", "dirt", "log", "wood", "leaves", "glass"];
- const layers = 9;
- const rows = 9;
- const columns = 9;
<html lang="en" style="--layers: #{layers}; --rows: #{rows}; --columns: #{columns}">
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="description" content="A Minecraft clone made with pure HTML &amp; CSS &ndash; no JavaScript." />
	<link rel="code-repository" href="https://github.com/BenjaminAster/CSS-Minecraft" />

	<title>CSS Minecraft</title>

	<link rel="icon" href="./assets/icon.png" />

	<link rel="stylesheet" href="./icons.css" />
	<link rel="stylesheet" href="./main.css" />

	<link rel="preload" as="image" href="./assets/azalea_leaves.png" />
	<link rel="preload" as="image" href="./assets/dirt.png" />
	<link rel="preload" as="image" href="./assets/glass.png" />
	<link rel="preload" as="image" href="./assets/grass_carried.png" />
	<link rel="preload" as="image" href="./assets/grass_side_carried.png" />
	<link rel="preload" as="image" href="./assets/log_oak.png" />
	<link rel="preload" as="image" href="./assets/pickaxe.png" />
	<link rel="preload" as="image" href="./assets/stone.png" />

	<style>
		- const sourceMap = { version: 3, sources: ["./index.pug"], mappings: "" };
		| /*# sourceMappingURL=data:application/json;charset=utf-8,#{encodeURIComponent(JSON.stringify(sourceMap))} */
	</style>

	<section class="info">
		<div class="text">
			<h1>CSS Minecraft</h1>
			<p>
				| <strong>There is no JavaScript on this page.</strong> All the logic is made 100% with pure HTML & CSS. For the best performance, please close other tabs and running programs.<br />
				| View on <a href="https://github.com/BenjaminAster/CSS-Minecraft">GitHub</a>, <a href="https://codepen.io/Benjamin_Aster/pen/gOKwpOd">CodePen</a>, <a href="https://benjaminaster.com/css-minecraft/">benjaminaster.com</a>
			</p>
			<p class="not-supported">
				| ⚠︎ Your browser does not support the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">CSS <code>:has()</code> pseudo-class</a>, which is needed for this site to work.
				| Please update it: Chromium version ≥ 105, Safari version ≥ 15.4 or Firefox version ≥ 121 is required.
			</p>
		</div>
		<label class="close" title="close">
			<input type="checkbox" />
		</label>
	</section>

	<section class="controls">
		<div class="block-chooser">
			<span class="label">Block type</span>
			each block in blocks
				<label class="#{block}" title="#{block}">
					<input type="radio" name="block-type" !{block === "stone" ? "checked" : ""} />
				</label>
			//- /each
		</div>

		<div class="move-buttons">
			<div class="move-button-pair">
				<span class="label">Vertical</span>
				<button class="up icon:arrow-circle-up" title="Move upwards"></button>
				<button class="down icon:arrow-circle-down" title="Move downwards"></button>
			</div>
			<div class="move-button-pair">
				<span class="label">Horizontal</span>
				<button class="forwards icon:arrow-upward" title="Move forwards"></button>
				<button class="backwards icon:arrow-downward" title="Move backwards"></button>
			</div>
			<div class="move-button-pair">
				<span class="label">Rotation</span>
				<button class="clockwise icon:rotate-right" title="Rotate clockwise"></button>
				<button class="counterclockwise icon:rotate-left" title="Rotate counterclockwise"></button>
			</div>
			<div class="move-button-pair">
				<span class="label">View</span>
				<button class="look-up icon:keyboard-arrow-up" title="Look up"></button>
				<button class="look-down icon:keyboard-arrow-down" title="Look down"></button>
			</div>
		</div>
	</section>

	<main>
		<div class="content">
			<div class="look-up">
				<div class="look-down">
					<div class="initial-camera-position">
						<div class="up">
							<div class="down">
								<div class="forwards">
									<div class="backwards">
										<div class="clockwise">
											<div class="counterclockwise">
												<div class="blocks">
													for _, layer in Array(layers)
														for _, row in Array(rows)
															for _, column in Array(columns)
																<div class="cubes-container" style="--layer: #{layer}; --row: #{row}; --column: #{column}">
																	- const selectedBlock = layer === layers - 1 ? "grass" : "air";
																	- const name = `cube-layer-${layer}-row-${row}-column-${column}`;
																	<div class="cube #{blocks[0]}">
																		- const id = `${name}-${blocks[0]}`;
																		<input type="radio" name="#{name}" id="#{id}" !{selectedBlock === blocks[0] ? "checked" : ""} />
																		<label for="#{id}" class="front"></label>
																		<label for="#{id}" class="back"></label>
																		<label for="#{id}" class="left"></label>
																		<label for="#{id}" class="right"></label>
																		<label for="#{id}" class="top"></label>
																		<label for="#{id}" class="bottom"></label>
																	</div>
																	each block, index in blocks.slice(1)
																		- const id = `${name}-${block}`;
																		- const checked = index === 0;
																		<div class="cube #{block}">
																			<input type="radio" name="#{name}" id="#{id}" !{selectedBlock === block ? "checked" : ""} />
																			<label for="cube-layer-#{layer}-row-#{row + 1}-column-#{column}-#{block}" class="front"></label>
																			<label for="cube-layer-#{layer}-row-#{row - 1}-column-#{column}-#{block}" class="back"></label>
																			<label for="cube-layer-#{layer}-row-#{row}-column-#{column + 1}-#{block}" class="left"></label>
																			<label for="cube-layer-#{layer}-row-#{row}-column-#{column - 1}-#{block}" class="right"></label>
																			<label for="cube-layer-#{layer - 1}-row-#{row}-column-#{column}-#{block}" class="top"></label>
																			<label for="cube-layer-#{layer + 1}-row-#{row}-column-#{column}-#{block}" class="bottom"></label>
																		</div>
																	//- /each
																</div>
															//- /for
														//- /for
													//- /for
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
</html>